<template>
    <div>
        <div style="
            padding-left: 1.3125rem;
            display: flex;
            align-items: center;
            height: calc(2.75rem + env(safe-area-inset-top)); /* 确保填满 */
            line-height: 2.75rem;
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 999;
            background: #fff;
          ">
            <img src="~/static/zixun/jiantou.png" alt="" style="width: 0.875rem; height: 0.875rem; object-fit: contain"
                @click="goBack" />
            <div style="font-weight: bold; font-size: 1rem; margin-left: 1.25rem">
                资讯详情
            </div>
        </div>
        <div style="margin: 0.75rem" @click="filse = true">
            <div style="font-size: 1.0625rem; font-weight: bold; z-index: 999;line-height: 28px;">
                {{ listdata?.title }}
            </div>
            <div  style="
              display: flex;
              align-items: center;
              margin-top: 0.5rem;
              justify-content: space-between;
              background: #edeef0;
              padding: 0.5rem;
              border-radius: 0.75rem;
            ">
                <div style="display: flex; align-items: center">
                        <img :src="filicons?.avatar" alt="" style=" width: 36px;height:36px;border-radius: 50%;object-fit: cover;" />

                    <div style="margin-left: 0.75rem">
                        <div style="font-weight: 500; font-size: 0.8125rem">
                            {{ filicons?.user_name }}
                        </div>
                    </div>
                </div>
            </div>
            <div v-html="listdata?.content" class="rich-text-container"></div>

            <div style="
              background: #f7f8fa;
              padding: 0.5rem;
              margin-top: 0.5rem;
              border-radius: 1rem;
              background: #ffffff;
            " v-if="gamelist?.icon">
                <div style="display: flex; align-items: center">
                    <div style="width: 48px; height: 48px; object-fit: cover">
                        <img :src="gamelist.icon" alt="" style="
                    width: 100%;
                    height: 100%;
                    border-radius: 12px;
                    object-fit: cover;
                  " />
                    </div>
                    <div style="margin-left: 0.45rem">
                        <div style="display: flex; align-items: center">
                            <div style="font-size: 1rem; font-weight: bold; color: #47494d">
                                {{ gamelist?.name }}
                            </div>
                            <div class="xiangqing">游戏详情</div>
                        </div>
                        <div style="
                    margin-top: 0.25rem;
                    font-size: 10px;
                    color: #47494d;
                    font-weight: 500;
                  ">
                            类型:{{ gamelist.system_type_text }}&nbsp;&nbsp;人气:{{
                                gamelist?.number
                            }}
                        </div>
                    </div>
                </div>
                <div class="text-snippet" @click="showModal">
                    <div>{{ shortenedContent }} <span v-if="gamelist.content.length > 50" class="read-more">...全文</span>
                    </div>
                </div>
                <modal v-if="isModalVisible" @close="closeModal">
                    <template #body>
                        <div>{{ gamelist?.content }}</div>
                    </template>
                </modal>
            </div>

            <div style=" display: flex;align-content: center; justify-content: space-between; margin-top: .6875rem;
            " v-if="gamelist">
                <div style="color: #1a1a1aff; font-size: 0.875rem; font-weight: bold">
                    大家都在玩
                </div>
                <img src="~/static/index/iconright.png" alt="" style="
                  width: 0.75rem;
                  height: 0.75rem;
                  margin-left: 0.25rem;
                  padding-top: 0.125rem;
                " />
            </div>
            <div>
                <van-swipe :autoplay="3000" class="swipe-container" :width="300"
                    v-if="gamelist && paginatedItems.length > 0">
                    <van-swipe-item v-for="(page, pageIndex) in paginatedItems" :key="pageIndex" class="swipe-item"
                        show-indicators="false">
                        <div class="row" v-for="(item, itemIndex) in page" :key="itemIndex"
                            @click="goitemlist(item.id)">
                            <img :src="item.icon" alt="" class="item-icon" />
                            <div class="item-content">
                                <div class="item-name">{{ item.name }}</div>
                                <div class="item-tags">
                                    <div v-for="(tag, tagIndex) in item.biaoqian" :key="tagIndex" class="item-tag">
                                        {{ tag }}
                                    </div>
                                </div>
                                <div class="item-point">
                                    <img src="~/static/index/mixed.png" alt="" class="point-icon"
                                        style="margin-right: 0;" />
                                    <div class="point-value">{{ item.point }}</div>
                                </div>
                            </div>
                        </div>
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div style="  display: flex; align-items: center;  margin-top: 0.5rem;  justify-content: space-between; "
                v-if="paginatedItemslist.length > 0">
                <div style="color: #333333; font-size: 0.875rem; font-weight: bold">
                    全部评论
                </div>
            </div>
            <div v-if="paginatedItemslist.length > 0" style="
              background: #ffffff;
              border-radius: 0.75rem;
              margin-top: 0.75rem;
              padding: 1rem 0.75rem;
              margin-bottom: 0.75rem;
            " v-for="(items, index) in paginatedItemslist" :key="index">
                <div style="display: flex; align-items: center">
                    <img :src="items.user.face" alt="" style="width: 2.5rem; height: 2.5rem; border-radius: 50%" />
                    <div style="margin-left: 0.75rem">
                        <div style="display: flex; align-items: center">
                            <div style="font-size: 0.75rem; color: #17181a; font-weight: bold">
                                {{ items.user.user_name }}
                            </div>
                            <img src="~/static/guangchang/userbadge.png" alt=""
                                style="width: 2.8125rem; height: 0.75rem; margin-left: 0.25rem" />
                        </div>

                        <div style="font-size: 11px; color: #aeb0b3; margin-top: 0.375rem">
                            {{ items.time }}
                        </div>
                    </div>
                </div>
                <div style="display: flex; align-items: center">
                    <div style="width: 2.5rem; height: 2.5rem; border-radius: 50%"></div>
                    <div v-if="items.content" class="truncate">
                        {{ items.content }}
                    </div>
                </div>
                <div style="
                display: flex;
                align-items: center;
                margin-top: 0.5rem;
                justify-content: space-between;
              ">
                    <div></div>
                    <div style="
                  display: flex;
                  align-items: center;
                  font-size: 0.625rem;
                  font-weight: 500;
                  color: #7b7d80;
                ">
                        <div>{{ items.zan }}点赞
                        </div>
                        <img v-if="items.seacted" @click="gozan(items.id, items, 1)" src="~/static/zixun/xzax1.png"
                            alt="" style="width: 1rem; height: 1rem; margin-left: 0.875rem" />
                        <img v-else @click="gozan(items.id, items, 1)" src="~/static/zixun/xzax.png" alt=""
                            style="width: 1rem; height: 1rem; margin-left: 0.75rem" />
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 3.6rem"></div>
        <div class="dibutab">
            <div>
                <van-field v-model="value" @focus="focus" placeholder="写点什么" style="
                width: 10rem;
                border-radius: 1.0625rem;
                background-color: #7b7d8014;
                height: 1.875rem;
                line-height: 0.1rem;
                text-align: center;
              " />
            </div>
            <div v-if="filse" style="
              display: flex;
              align-items: center;
              margin-left: 1.5rem;
              justify-content: space-between;
            ">
                <!-- <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;">
                     <img src="~/static/index/mixed.png" alt="" style="width:1;height:1rem">
                     <div style="font-size: .625rem;font-weight: 500;margin-top:.1875rem">分享</div>
                  </div> -->
                <div style="
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
              " @click="filse = false">
                    <img v-if="pinglntype" src="~/static/zixun/pingln2.png" alt=""
                        style="width: 1.5rem; height: 1.5rem" />
                    <img v-if="pinglntype == false" src="~/static/zixun/pingln.png" alt=""
                        style="width: 1.5rem; height: 1.5rem" />
                    <div style="font-size: 0.625rem; font-weight: 500; margin-top: 0.1875rem">
                        评论
                    </div>
                </div>
                <div style="
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
                margin: 0.9rem;
              " @click="goshoucang()">
                    <img v-if="shoucangtype" src="~/static/zixun/shoucang.png" alt=""
                        style="width: 1.5rem; height: 1.5rem" />
                    <img v-if="shoucangtype == false" src="~/static/zixun/shoucang1.png" alt=""
                        style="width: 1.5rem; height: 1.5rem" />
                    <div style="font-size: 0.625rem; font-weight: 500; margin-top: 0.1875rem">
                        收藏
                    </div>
                </div>
                <div style="
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
              " @click="gozixunzan()">
                    <img v-if="zuxuntype" src="~/static/zixun/xzax1.png" alt="" style="width: 1.5rem; height: 1.5rem" />
                    <img v-if="zuxuntype == false" src="~/static/zixun/xzax.png" alt=""
                        style="width: 1.5rem; height: 1.5rem" />
                    <div style="font-size: 0.625rem; font-weight: 500; margin-top: 0.1875rem">
                        点赞
                    </div>
                </div>
            </div>
            <div v-if="filse == false" @click="gopingluns">
                <img v-if="value != ''" src="~/static/zixun/normal@2x.png" alt=""
                    style="width: 2.75rem; height: 1.9375rem" />
                <img v-if="value == ''" src="~/static/zixun/forbid@2x.png" alt=""
                    style="width: 2.75rem; height: 1.9375rem" />
            </div>
        </div>

        <div v-if="!gamelist && !duonewgames" style="display: flex;">
            <div
                style="margin:50%  auto;display: flex;flex-direction: column;align-items: center;justify-content: center;">
                <img src="https://static-tool.77.top/static/null-image.png" alt="" style="width:180px;height:180px;">
                <div style="color: #2E3033;font-weight: bold;margin-top: 15px;">暂无咨询消息哦~</div>
            </div>
        </div>
    </div>
</template>

<script>
import md5 from "js-md5";
import { nextTick } from "vue";
import Modal from "@/components/Modal.vue"; // 确保这里的路径正确
export default {
    components: {
        Modal,
    },
    async asyncData({ params, $axios, req }) {
        if (process.server) {
            const userAgent = req.headers['user-agent'];
            const isAppleDevice = /iPad|iPhone|iPod/.test(userAgent) && !/Android/.test(userAgent);
            const id = params.id.replace(/\.html$/, "");
            let cookieValue = '';
            const getCookie = (name) => {
                const value = `; ${document.cookie}`;
                const parts = value.split(`; ${name}=`);
                if (parts.length === 2) return parts.pop().split(";").shift();
                return "";
            };
            const queryParams = {
                ct: "news",
                ac: "info",
                id: id,
            };
            const response = await $axios.get("api/app/v3", { params: queryParams });

            return {
                id: id,
                listdata: response.data?.data,
                gamelist: response.data?.game,
                filicons: response.data?.author,
                duonewgames: response.data.game_yqw,
                seos: response.data.seos,
            };
        }

    },
    props: {
        gamelist: {
            type: Object,
            required: true,
        },
    },
    head() {
        return {
            title: this.seos?.title, // 动态标题
            meta: [
                { hid: 'description', name: 'description', content: this.seos?.description }, // 描述
                { hid: 'keywords', name: 'keywords', content: this.seos?.keywords } // 关键词
            ]
        }
    },
    data() {
        return {
            id: this.$route.query.id,
            listdata: {},
            gamelist: {},
            filicons: {},
            duonewgames: [],
            zantype: true,
            value: "",
            uid: "",
            paginatedItemslist: [],
            id: "",
            zuxuntype: true,
            shoucangtype: true,
            filse: true,
            pinglntype: true,
            isModalVisible: false,
            seos: '',
            iosAndroid: false,
            model: ''
        };
    },
    mounted() {
        const currentPath = this.$route.path;
        this.id = currentPath.split("/")[2].split(".")[0];
        this.model = this.$route.query.model;
        if (this.$route.query.uid == null || this.$route.query.uid == undefined || this.$route.query.uid == '') {
            this.uid = this.getCookie("loginnew");
            this.dawlist(this.id);
            this.zixunpinglun(this.id);
        } else {
            this.iosAndroid = true
            this.uid = this.$route.query.uid;
            if (this.$route.query.id == '' || this.$route.query.id == null || this.$route.query.id == undefined) {
                this.id = currentPath.split("/")[2].split(".")[0];
                this.dawlist(this.id);
                this.zixunpinglun(this.id);
            } else {
                this.dawlist(this.$route.query.id);
                this.zixunpinglun(this.$route.query.id);
            }

        }
    },
    computed: {
        paginatedItems() {
            const itemsPerPage = 3;
            let pages = [];
            for (let i = 0; i < this.duonewgames.length; i += itemsPerPage) {
                pages.push(this.duonewgames.slice(i, i + itemsPerPage));
            }
            return pages;
        },
        shortenedContent() {
            const maxLength = 50;
            if (this.gamelist.content.length > maxLength) {
                return this.gamelist.content.substring(0, maxLength);
            }
            return this.gamelist.content;
        },
    },
    methods: {
        showModal() {
            this.isModalVisible = !this.isModalVisible;
        },
        closeModal() {
            this.isModalVisible = false;
        },
        goitemlist(e) {
         if(this.model=='android'){
            window.WebViewJavascriptBridge.callHandler(
                'WebGameDetails'
                , e
                , function(responseData) {
                    console.log('native return->'+responseData);
                }
            );
         }else if(this.model=='ios'){
            window.webkit.messageHandlers.toGameDetail.postMessage(
                e
                );
         }else{
            this.$router.push({
                path: `/shouyou/${e}.html`,
            });
         }
        },
        goBack() {
            this.$router.back();
            if (this.model=='ios'){
                window.webkit.messageHandlers.jsPopHandler.postMessage(
                    "Hello from JavaScript!"
                );
            }
            },
        focus() {
            this.filse = false;
        },
        getCookie(name) {
            const value = `; ${document.cookie}`;
            const parts = value.split(`; ${name}=`);
            if (parts.length === 2) return parts.pop().split(";").shift();
            return "";
        },
        async gopingluns() {
            if (this.model == 'android' && (this.uid == '' || this.uid == null || this.uid == undefined)) {
                window.WebViewJavascriptBridge.callHandler(
                    'WebLogin'
                    , { 'msg': '未登录' }
                    , function (responseData) {
                        console.log('native return->' + responseData);
                    }
                );
            } else if (this.model == 'ios' && (this.uid == '' || this.uid == null || this.uid == undefined)) {
                window.webkit.messageHandlers.toLogin.postMessage(
                    "zhang rui shi shabi!"
                );

            }else{
                if (this.uid == '' || this.uid == null || this.uid == undefined) {
                window.location.href = `${this.$domain}/?ct=wap&ac=login&goto=https:news/${this.id}.html`;
            }
            let t = Date.now();
            const sign = `${this.uid}${t}fsd213ewdsadqwe2121213edsad`;
            let textToHash = md5(sign);
            const params = {
                ct: "aznews",
                ac: "add",
                id: this.id,
                t: t,
                uid: this.uid,
                content: this.value,
                sign: textToHash,
            };
            const response = await this.$axios.get("", { params });
            this.value = ''
            this.zixunpinglun(this.id);
            }
        },
        async gozan(e, a, b) {
            let t = Date.now();
            const sign = `${this.uid}${t}fsd213ewdsadqwe2121213edsad`;
            let textToHash = md5(sign);
            const params = {
                ct: "news",
                ac: "zan",
                id: e,
                type: b,
                t: t,
                uid: this.uid,
                sign: textToHash,
            };
            const response = await this.$axios.get("api/app/v3", { params });
            a.seacted = !a.seacted;
            this.zixunpinglun(this.id);
        },
        async gozixunzan() {
            if (this.model == 'android' && (this.uid == '' || this.uid == null || this.uid == undefined)) {
                window.WebViewJavascriptBridge.callHandler(
                    'WebLogin'
                    , { 'msg': '未登录' }
                    , function (responseData) {
                        console.log('native return->' + responseData);
                    }
                );
            } else if (this.model == 'ios' && (this.uid == '' || this.uid == null || this.uid == undefined)) {
                window.webkit.messageHandlers.toLogin.postMessage(
                    "zhang rui shi shabi!"
                );                              
            } else {
                let t = Date.now();
                const sign = `${this.uid}${t}fsd213ewdsadqwe2121213edsad`;
                let textToHash = md5(sign);
                const params = {
                    ct: "news",
                    ac: "zan",
                    id: this.id,
                    type: 0,
                    t: t,
                    uid: this.uid,
                    sign: textToHash,
                };
                const response = await this.$axios.get("api/app/v3", { params });
                this.zuxuntype = !this.zuxuntype;
            }

        },
        async goshoucang() {
            if (this.model == 'android' && (this.uid == '' || this.uid == null || this.uid == undefined)) {
                window.WebViewJavascriptBridge.callHandler(
                    'WebLogin'
                    , { 'msg': '未登录' }
                    , function (responseData) {
                        console.log('native return->' + responseData);
                    }
                );
            } else if (this.model == 'ios' && (this.uid == '' || this.uid == null || this.uid == undefined)) {
                window.webkit.messageHandlers.toLogin.postMessage(
                    "zhang rui shi shabi!"
                );

            } else {
                let t = Date.now();
                const sign = `${this.uid}${t}fsd213ewdsadqwe2121213edsad`;
                let textToHash = md5(sign);
                const params = {
                    ct: "news",
                    ac: "shoucang",
                    news_id: this.id,
                    t: t,
                    uid: this.uid,
                    sign: textToHash,
                };
                const response = await this.$axios.get("api/app/v3", { params });
                if(this.uid != '' || this.uid != null || this.uid != undefined){
                    this.shoucangtype = !this.shoucangtype;
                }
                
            }

        },
        async zixunpinglun(e) {
            let that = this;

            let t = Date.now();
            const sign = `${this.uid}${t}fsd213ewdsadqwe2121213edsad`;
            let textToHash = md5(sign);
            const params = {
                ct: "aznews",
                ac: "comment",
                id: e,
                sign: textToHash,
                t: t,
                uid: this.uid,
            };
            const response = await this.$axios.get("", { params });
            response.data.data.forEach((item) => {
                item.seacted = true;
                if (item.is_zan == 1) {
                    item.seacted = false;
                }
            });
            this.paginatedItemslist = response.data.data;
        },
        async dawlist(id) {
            let t = Date.now();
            const sign = `${this.uid}${t}fsd213ewdsadqwe2121213edsad`;
            let textToHash = md5(sign);
            const params = {
                ct: "news",
                ac: "info",
                id: id,
                sign: textToHash,
                t: t,
                uid: this.uid,
            };
            const response = await this.$axios.get("api/app/v3", { params });
            if (response.data.data.is_zan == 1) {
                this.zuxuntype = false;
            }
            if (response.data.data.is_shoucang == 1) {
                this.shoucangtype = false;
            }
            this.listdata = response.data.data;
            this.gamelist = response.data.game;
            if (response.data.author != null) {
                this.filicons = response.data.author;
            }
            this.filicons = response.data.author;
            this.duonewgames = response.data.game_yqw;
            this.seos = response.data.seos
        },
        formattedTime(e) {
            const totalSeconds = Math.floor(e / 1000);
            const hours = Math.floor(totalSeconds / 3600);
            const minutes = Math.floor((totalSeconds % 3600) / 60);
            const seconds = totalSeconds % 60;

            return `${hours}小时 ${minutes}分钟 ${seconds}秒`;
        },
    },
};
</script>
<style>
body {
    background: #f7f8fa !important;
    font-size: 16px;
    /* 默认字体大小 */
}
</style>
<style scoped>
.text-snippet {
    font-weight: 500;
    font-size: 12px;
    color: #47494D;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    width: 100%;
    cursor: pointer;
}

.read-more {
    color: #FF7700;
    /* 设置颜色 */
}

.guanzhus {
    width: 4.125rem;
    height: 1.625rem;
    border-radius: 4.25rem;
    border: 0.0625rem solid #2e3033;
    line-height: 1.625rem;
    text-align: center;
}

.xiangqing {
    width: 54px;
    height: 18px;
    line-height: 1.125rem;
    background: #ff7600;
    font-weight: bold;
    border-radius: 0.25rem;
    text-align: center;
    font-size: 10px;
    color: #ffffff;
    margin-left: 0.6875rem;
}

.swipe-container {
    height: 14.55rem;
}

.swipe-item {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    margin: 0.75rem 0 0 0;
    /* 行间距 */
}

.item-icon {
    width: 3.75rem;
    height: 3.75rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
}

.item-content {
    margin-left: 0.75rem;
    flex: 1;
}

.item-name {
    color: #1a1a1a;
    font-size: 0.875rem;
    font-weight: bold;
}

.item-tags {
    display: flex;
    align-items: center;
    margin: 0.25rem 0;
}

.item-tag {
    color: #aeb0b3;
    font-weight: 500;
    font-size: 0.8125rem;
    margin-right: 0.9375rem;
}

.item-point {
    display: flex;
    align-items: flex-end;
    margin-top: 0.25rem;
}

.point-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

.point-value {
    color: #ff7500;
    font-size: 0.75rem;
}

.rich-text-container /deep/ p img {
    width: 100% !important;
    height: auto;
    overflow: hidden;
    display: block;
    margin: 0 auto;
}

/deep/.van-swipe__indicators {
    position: absolute;
    bottom: 12px;
    left: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

/deep/.van-swipe__indicator {
    width: 0;
    height: 0;
    background-color: #ebedf0;
    border-radius: 100%;
    opacity: 0.3;
    -webkit-transition: opacity 0.2s, background-color 0.2s;
    -webkit-transition: opacity 0.2s, background-color 0.2s;
    transition: opacity 0.2s, background-color 0.2s;
}

.pinghuan {
    width: 4.75rem;
    height: 1.75rem;
    background: #e4e4e6;
    border-radius: 1.375rem;
    display: flex;
    align-items: center;
}

.truncate {
    color: #47494d;
    font-size: 0.9375rem;
    width: 70%;
    margin-top: 0.8125rem;
    font-weight: 500;
    overflow: hidden;
    margin-left: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* 显示最多两行 */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-height: 1.5;
    /* 根据需要调整行高 */
}

.dibutab {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    height: 2rem;
    width: 100%;
    padding: 0.75rem;
    background-color: #fff;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

/deep/ iframe {
    width: 100%;
}
</style>
